<!--公告通知-->
<template>
  <div id="myNotice" class="app-container">
    <el-tabs v-model="listQuery.noticeType" class="common-tabs" @tab-click="handleTabClick">
      <el-tab-pane label="通知公告" name="1" />
      <el-tab-pane label="系统消息" name="2" />
    </el-tabs>
    <!--列表-->
    <div class="table-container flex-main">

      <div class="table-container-header">

        <table-toolbar :create="false" :refresh="false" :remove="false">
          <template>
            <el-button v-if="unReads.length>0" type="primary" icon="el-icon-tickets" plain @click="handleSettingReadAll">全部已读</el-button>
            <el-button v-if="unReads.length==0" icon="el-icon-tickets" plain>全部已读</el-button>
          </template>
          <template slot="rightTool">
            <search v-model="listQuery.noticeTitle" :placeholder="'请输入'+(listQuery.noticeType==='1'?'通知公告标题':'系统标题')" @search="handleFilter" />
          </template>
        </table-toolbar>
      </div>
      <el-table
        ref="multipleTable"
        :data="list"
        header-cell-class-name="table-header"
        fit
        height="100%"
        highlight-current-row
        @sort-change="sortChange">
        <el-table-column align="center" prop="id" label="#" width="60">
          <template slot-scope="scope">{{ scope.$index+1 }}</template>
        </el-table-column>
        <el-table-column label="标题" prop="noticeTitle" min-width="200" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span v-if="scope.row.sendStatus===1" class="color-primary common-cursor" @click="handleLook(scope.row.id)">{{ scope.row.noticeTitle }}</span>
            <span v-else>{{ scope.row.noticeTitle }}</span>
          </template>
        </el-table-column>
        <el-table-column label="摘要" prop="noticeAbstract" width="300" :show-overflow-tooltip="true" />

        <el-table-column label="阅读状态" prop="readFlag" width="90" align="center" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span v-if="scope.row.readFlag===0" class="color-danger">未读</span>
            <span v-if="scope.row.readFlag===1" class="color-primary">已读</span>
          </template>
        </el-table-column>
        <el-table-column label="优先级" prop="priority" width="90" align="center" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span v-if="scope.row.priority===0">低</span>
            <span v-if="scope.row.priority===1" class="color-success">中</span>
            <span v-if="scope.row.priority===2" class="color-primary">高</span>
          </template>
        </el-table-column>
        <el-table-column prop="createdBy" sortable align="center" label="发布人" width="180">
          <template slot-scope="scope">{{ scope.row.createdBy | optionUserFormat }}</template>
        </el-table-column>
        <el-table-column prop="startTime" sortable label="起止时间" width="260">
          <template slot-scope="scope">
            {{ scope.row.startTime | formatDate(T.DATE_TIME_FMT) }}&nbsp;~&nbsp;
            <span v-if="scope.row.endTime<new Date().getTime()" class="color-danger ">{{ scope.row.endTime | formatDate(T.DATE_TIME_FMT) }}</span>
            <span v-else>{{ scope.row.endTime | formatDate(T.DATE_TIME_FMT) }}</span>

          </template>
        </el-table-column>
        <el-table-column prop="sendTime" sortable label="发布时间" width="160">
          <template slot-scope="scope">{{ scope.row.sendTime | formatDate }}</template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination_handler">
      <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="fetchData" />
    </div>

  </div>
</template>

<script>
export default {
  components: {},

  data() {
    return {
      unReads: [],
      list: null,
      total: 0,
      listQuery: {
        page: 1,
        limit: this.common.PAGE_LIMIT_DEFAULT,
        noticeType: '1',
        name: undefined,
        sort: this.common.SORT_DEFAULT
      }
    }
  },
  watch: {
    'listQuery.noticeType': function(val) {
      this.fetchData()
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    handleTabClick() {

    },
    handleLook(id) {
      window.open(this.$router.resolve({ path: '/upms/system/notice/sendDetails/' + id }).href)
      setTimeout(() => {
        this.fetchData()
      }, 2000)
    },

    // 表格自带方法开始
    /**
     * 表格列排序
     */
    sortChange(data) {
      const { prop, order } = data
      if (prop) {
        if (order === 'ascending') {
          this.listQuery.sort = '+' + prop
        } else {
          this.listQuery.sort = '-' + prop
        }
      } else {
        this.listQuery.sort = this.common.SORT_DEFAULT
      }
      this.handleFilter()
    },
    // 表格自带方法结束

    async fetchData() {
      if (this.listQuery.noticeType === '1') {
        this.unReads = (await this.$store.dispatch('currentUserUnReadNotice')).notice
      }
      if (this.listQuery.noticeType === '2') {
        this.unReads = (await this.$store.dispatch('currentUserUnReadNotice')).system
      }
      const response = await this.$store.dispatch('currentUserNoticeSendPage', this.listQuery)
      this.list = response.records
      this.total = response.total
    },

    /**
     * 搜索
     */
    handleFilter() {
      this.listQuery.page = 1
      this.fetchData()
    },
    handleSettingReadAll() {
      this.$confirm('此操作将标注全部已读, 是否继续?', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('currentUserNoticeSendSetRead', this.listQuery.noticeType).then(response => {
          this.handleFilter()
          this.handleNotify()
        }).catch(() => {})
      }).catch(() => { })
    },
    handleNotify() {
      this.$store.dispatch('notifySystemMessage', true)
    }

  }
}
</script>
<style lang="scss">
#myNotice{
  .el-tabs__content{
    height: 0px !important;
    padding: 0px !important;
  }
  .el-tabs--border-card{
    border: 0px;
  }
}
</style>
